<!-- html -->
<template>
    <h1 class="h1">ref，响应式数据</h1>
    <span class="span1" @click="refTest1">基本类型</span>
    <span class="span1" @click="refTest2">对象类型</span>
    <span class="span1" @click="toRefTest1">toRef</span>
    <span class="span1" @click="toRefsTest1">toRefs</span>
    <span class="span1" @click="customrefTest1">自定义ref</span>
    <span class="span1" @click="shallowRefTest1">shallowRef</span>
    <hr>
    <RouterView />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    name: 'refHome'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
//数据
let router = useRouter()
//方法
function refTest1() {
    router.push({
        path: '/refHome/refTest1'
    })
}
function refTest2() {
    router.push({
        path: '/refHome/refTest2'
    })
}
function toRefTest1() {
    router.push({
        path: '/refHome/toRefTest1'
    })
}
function toRefsTest1() {
    router.push({
        path: '/refHome/toRefsTest1'
    })
}
function customrefTest1() {
    router.push({
        path: '/refHome/customRefTest1'
    })
}
function shallowRefTest1() {
    router.push({
        path: '/refHome/shallowRefTest1'
    })
}
</script>

<!-- 样式 -->
<style scoped></style>